<template>
    <div class="first-context-warp">
<!--        <div v-if="showVideo" class="first-context">
            <video :src="empUrl" autoplay="autoplay" loop="loop" class="video" muted/>
        </div> -->
     <div class="first-context">
		  <img src="~@/assets/img/1.png"  />
        </div>
        <my-menu/>
        <div class="slogan">
            <div class="slogan-title animate__animated f-big" :class="{animate__flipInX:animation}" v-show="animation">
                三秋律所 以商为中心
            </div>
            <div class="slogan-content animate__animated f-big-second" :class="{animate__flipInX:animation}" v-show="animation">
                以商事诉讼 商事辩护 商事顾问
                公司合规审查为基石，
            </div>
            <div class="slogan-footer animate__animated f-big-second" :class="{animate__fadeInUp:animation}" v-show="animation">
                追求优质、专业、高效、极致。
            </div>
        </div>
        <div class="search-box animate__animated " :class="{animate__fadeInUp:animation}" v-show="animation">
            <input v-model="search" type="text" placeholder="有什么可以帮您的？" class="f1">
            <div class="search-icon"
                 @click.stop="()=>{$router.push({ name: 'SearchResult', params: { title: search }})}">
                <img src="~@/assets/img/index-first-search-icon.png?v=1" alt="">
            </div>
        </div>
    </div>

</template>
<script>
import myMenu from '@/components/menu.vue'

export default {
    components: {myMenu},
    props: ["showVideo", "empUrl", "animation"],
    data() {
        return {
            search: ""
        }
    },
}
</script>
<style lang="less">
.first-box {
    //.menu-box{
    //    height: 47px;
    //}
    .first-context-warp {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .first-context:after{
        content: '';
        width: 100%;
		height: 100%;
		background: rgba(0,0,0,.33);
		position: absolute;
		left: 0;
		top: 0;

    }
    .first-context {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        .video {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
    }

    .slogan {
		display: flex;
        flex-direction: column;
        margin: 130px auto;
        justify-content: center;
        width: 40%;
		font-family: Microsoft YaHei;
		
        .slogan-title {
            font-weight: bold;
            font-size: 26px;
			line-height: 30px;
            color: #ffffff;
			text-align: center;
			margin-bottom: 15px;
        }

        .slogan-content {
            font-weight: 400;
			font-size: 18px;
            line-height: 22px;
            color: #ffffff;
			text-align: center;
			margin-bottom: 15px;
        }

        .slogan-footer {
			font-size: 14px;
			line-height: 18px;
            color: #ffffff;
			text-align: center;
        }
    }

    .search-box {
        width: 50%;
        background: rgba(0, 0, 0, 0.4);
        height: 48px;
        padding: 0 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
		margin: 200px auto;

        input {
            width: calc(100% - 50px);
            height: 100%;
            font-size: 20px;
            border: none;
			color: #ffffff;
            background: none;
        }
		input:placeholder{
			color: #D6D6D6;
		}
        input:focus {
            outline: none;
            border: none;
        }

        .search-icon {
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            border-left: 1px solid #707070;
            cursor: pointer;

            img {
                height: 25px;
            }
        }
    }

}
</style>
<style lang="less">
//@media screen and (min-width: 680px) and (max-width: 1400px) {
//    .first-box {
//        .search-box {
//            left: 10%;
//            width: calc(80% - 40px);
//            padding: 0 20px;
//
//            input {
//                font-size: 18px;
//            }
//        }
//
//        .slogan {
//            margin: 0 auto;
//            padding: 0;
//            width: 80%;
//            height: 50%;
//            justify-content: space-between;
//            padding-top: 100px;
//
//            div {
//                margin: 5px 0;
//            }
//
//            .slogan-title {
//            }
//
//            .slogan-content {
//            }
//
//            .slogan-footer {
//            }
//        }
//    }
//}
</style>

